<template>
    <div class="home">
        <HeaderMenu ref="header-menu"/>
        <div class="main">
            <NavMenu ref="nav-menu"/>
            <router-view/>
        </div>
    </div>
</template>

<script>
    import HeaderMenu from '@/components/HeaderMenu.component'
    import NavMenu from '@/components/NavMenu.component'

    export default {
        name: 'Root',
        components: {
            HeaderMenu,
            NavMenu,
        },
        data() {
            return {}
        },
        methods: {
            /**
             * 初始化系统菜单设置
             */
            initSysMenu() {
                let menuList = this.$store.state.menuStore.menuList;
                let hash = location.hash;
                let urls = hash.split('/').splice(2);
                let res = null;
                urls.forEach(url => {
                    res = _.find(menuList, menu => {
                        if (menu.path === url) {
                            return menu;
                        }
                    });
                    if (res && res.children) {
                        menuList = res.children;
                    }
                });
                if (res) {
                    this.$store.commit('initMenu', {
                        vm: this,
                        index: res.index,
                        attr: 'active',
                        flag: true
                    });
                } else {
                    this.$store.commit('setSysInfoStatus', {status: true});
                }
            }
        },
        mounted() {
            // let websocket = new this.websocket('',{test:'websocket'});
            this.initSysMenu();
        }
    }
</script>

<style lang="scss">
    @import "src/common/common.style";
    .home {
        width: 100%;
        height: 100%;
        background-color: #fff;
        .main {
            height: calc(100% - 50px);
            display: flex;
            @include bgImg("bg.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
    }
</style>
